<style lang="less">
.outlet .ivu-table-cell .ivu-table-wrapper{
  margin-top: 0;
  .ivu-table-cell{
    padding: 0;
  }
  .ivu-table{
    td{
      height: 30px;
    }
    .ivu-table-body table{
      width: 100% !important;
    }
  }
}
</style>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <card>
      <Row>
        <Col span="3" align="center" offset="2" style="line-height: 2;">对接系统标识</Col>
        <Col span="4">
          <Input v-model="searchData.docking_system_id" style="width: 80%"  placeholder="请输入对接系统标识"></Input>
        </Col>
        <Col span="3" align="center" style="line-height: 2;">对接系统名称</Col>
        <Col span="4">
          <Input v-model="searchData.docking_system_name" style="width: 80%"  placeholder="请输入对接系统名称"></Input>
        </Col>
        <Col span="2" align="center" style="line-height: 2;">状态</Col>
        <Col span="3">
          <Select v-model="searchData.docking_interface_state" style="width: 70%">
            <Option value="">全部</Option>
            <Option value="0">未启用</Option>
            <Option value="1">已启用</Option>
          </Select>
        </Col>
      </Row>
      <Row style="margin-top: 1%">
        <Col span="3" align="center" offset="2" style="line-height: 2;">对接接口标识</Col>
        <Col span="4">
          <Input v-model="searchData.docking_interface" style="width: 80%"  placeholder="请输入对接接口标识"></Input>
        </Col>
        <Col span="3" align="center" style="line-height: 2;">对接接口名称</Col>
        <Col span="4">
          <Input v-model="searchData.docking_interface_name" style="width: 80%"  placeholder="请输入对接接口名称"></Input>
        </Col>
        <Col span="4" align="end">
          <Button type="primary" icon="ios-search"  @click="init">搜索</Button>
        </Col>
      </Row>
    </card>
    <card style="margin-top: 1%">
      <Row>
        <Col span="3">
          <Button type="primary" icon="md-add-circle" @click="addCommonDockingInterface">添加</Button>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <Table border stripe class="outlet" :columns="columns" ref="selection" :data="dataList" style="margin-top: 1%;">
          </Table>
        </Col>
      </Row>
      <Row type="flex" justify="end" style="margin-top: 1%">
        <Page :current="pageNo" :total="totalnum" show-sizer :page-size="pageSize"
              show-total @on-change="changePageNo" @on-page-size-change="changePagesize"/>
      </Row>
    </card>
    <Modal v-model="modal.show" :title="modal.title" width="360">
      <Form :model="formData" :label-width="100">
        <FormItem label="对接系统">
          <Select v-model="docking_system_id" filterable transfer="">
            <Option :value="item.docking_system_id"  v-for="item in systemList" v-bind:key="item.docking_system_id">{{item.docking_system_name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="对接接口名称">
          <Input v-model="formData.docking_interface_name"></Input>
        </FormItem>
        <FormItem label="对接接口标识">
          <Input v-model="formData.docking_interface"></Input>
        </FormItem>
        <FormItem label="对接地址">
          <Input v-model="formData.docking_interface_url"></Input>
        </FormItem>
        <div v-for="(item,index) in paramsLable" :key="index">
          <FormItem :label=item.key>
            <Input v-model="item.value"></Input>
          </FormItem>
        </div>
        <FormItem label="content_type">
          <Input v-model="formData.docking_interface_content_type"></Input>
        </FormItem>
        <FormItem label="请求类型">
          <Input v-model="formData.docking_interface_type"></Input>
        </FormItem>
        <FormItem label="状态">
          <RadioGroup v-model="formData.docking_interface_state" >
            <Radio label="1" border>启用</Radio>
            <Radio label="0" border>未启用</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modal.show = false">取消</Button>
        <Button v-if="modal.type === '1'" type="primary" @click="addCommonDockingInterfaceOk">保存</Button>
        <Button v-if="modal.type === '2'" type="primary" @click="updateCommonDockingInterfaceOk">保存</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getCommonDockingInterfacePageList,
  getCommonDockingSystemList,
  addCommonDockingInterface,
  updateCommonDockingInterface,
  deleteCommonDockingInterface } from '@/api/eventlist'
export default {
  components: {
  },
  data () {
    return {
      paramsLable: [],
      dockingSystem: {},
      docking_system_id: '',
      systemList: [],
      disabled: true,
      searchData: {},
      searchData1: {},
      row: {},
      export_database_id: '',
      tableData: [],
      targetKeys: [],
      listStyle: {
        width: '40%',
        height: '300px'
      },
      modal: {
        title: '',
        show: false,
        type: ''
      },
      modal1: {
        title: '',
        show: false,
        type: ''
      },
      infoModal: {
        title: '导出数据库表明细',
        show: false,
        type: ''
      },
      addTableModal: {
        title: '添加导出数据库表',
        show: false,
        type: ''
      },
      formData: {},
      formData1: {},
      totalnum: 0,
      pageNo: 1,
      pageSize: 10,
      totalnum1: 0,
      pageNo1: 1,
      pageSize1: 10,
      columns: [
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '对接系统标识', key: 'docking_system_id', align: 'center' },
        { title: '对接系统名称', key: 'docking_system_name', align: 'center' },
        { title: '对接接口标识', key: 'docking_interface', align: 'center' },
        { title: '对接接口名称', key: 'docking_interface_name', align: 'center' },
        { title: '对接参数',
          key: 'docking_interface',
          minWidth: 400,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Table', {
                props: {
                  columns: [
                    {
                      title: '参数',
                      key: 'paramsList',
                      tooltip: true,
                      width: 213,
                      render: (h, params) => {
                        let text = `${params.row.key}`
                        return h(
                          'div',
                          {
                            style: {
                              overflow: 'hidden',
                              whiteSpace: 'nowrap',
                              textOverflow: 'ellipsis',
                              'text-align': 'center'
                            },
                            attrs: {
                              title: text
                            }
                          },
                          text
                        )
                      }
                    },
                    {
                      title: '参数值',
                      key: 'paramsList',
                      tooltip: true,
                      width: 213,
                      render: (h, params) => {
                        let text = `${
                          params.row.value
                        }`
                        return h(
                          'div',
                          {
                            style: {
                              overflow: 'hidden',
                              whiteSpace: 'nowrap',
                              textOverflow: 'ellipsis',
                              'text-align': 'center'
                            },
                            attrs: {
                              title: text
                            }
                          },
                          text
                        )
                      }
                    }
                  ],
                  'show-header': false,
                  data: params.row.paramsList }
              })
            ])
          } },
        // { title: '请求方式', key: 'docking_interface_type', align: 'center' },
        { title: '状态', key: 'docking_interface_state_all', width: 80, align: 'center' },
        { title: '操作',
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'success', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.formData = {}
                    this.docking_system_id = ''
                    this.paramsLable = []
                    console.log(params.row)
                    this.docking_system_id = params.row.docking_system_id
                    this.formData = params.row
                    let that = this
                    setTimeout(function () {
                      that.paramsLable = params.row.paramsList
                    }, 1500)
                    this.modal.title = '编辑对接接口设置'
                    this.modal.show = true
                    console.log(this.paramsLable)
                    // console.log(params)
                    // this.modal.title = '编辑导出数据库'
                    // this.modal.show = true
                    this.modal.type = '2'
                  }
                }
              }, '编辑'),
              h('Button', {
                props: { type: 'error', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.deleteCommonDockingInterfaceOk(params.row)
                  }
                }
              }, '删除'))
            return h('div', temp)
          }
        }
      ],
      dataList: []
    }
  },
  methods: {
    init () {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        docking_interface_state: this.searchData.docking_interface_state,
        docking_system_id: this.searchData.docking_system_id,
        docking_interface_name: this.searchData.docking_interface_name,
        docking_interface: this.searchData.docking_interface,
        docking_system_name: this.searchData.docking_system_name
      }
      getCommonDockingInterfacePageList(params).then(res => {
        if (res.data.errcode === 0) {
          res.data.data.results.forEach(function (temp) {
            if (temp.docking_interface_state === '0') {
              temp.docking_interface_state_all = '未启用'
            }
            if (temp.docking_interface_state === '1') {
              temp.docking_interface_state_all = '已启用'
            }
            temp.disabled = true
          })
          this.dataList = res.data.data.results
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    addCommonDockingInterface () {
      this.modal.title = '添加对接接口设置'
      this.modal.show = true
      this.modal.type = '1'
      this.formData = {}
    },
    addCommonDockingInterfaceOk () {
      this.formData.docking_system_id = this.dockingSystem.docking_system_id
      let obj = {}
      this.paramsLable.forEach(function (temp) {
        obj[temp.key] = temp.value
      })
      this.formData.docking_interface_params = JSON.stringify(obj)
      addCommonDockingInterface(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '添加成功'
          })
          this.formData = {}
          this.modal.show = false
          this.init()
        } else {
          this.$Notice.error({
            title: '添加数据失败',
            desc: res.data.errmsg
          })
        }
      })
      this.init()
    },
    updateCommonDockingInterfaceOk () {
      let params = this.formData
      params.docking_system_id = this.docking_system_id
      let obj = {}
      this.paramsLable.forEach(function (temp, index) {
        obj[temp.key] = temp.value
      })
      params.docking_interface_params = JSON.stringify(obj)
      updateCommonDockingInterface(params).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '修改成功'
          })
          this.formData = {}
          this.docking_system_id = ''
          this.paramsLable = []
          this.modal.show = false
          this.init()
        } else {
          this.$Notice.error({
            title: '修改数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    deleteCommonDockingInterfaceOk (param) {
      deleteCommonDockingInterface(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '删除成功'
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '删除数据失败',
            desc: res.data.errmsg
          })
        }
      })
      this.init()
    },
    getCommonDockingSystemList () {
      getCommonDockingSystemList().then(res => {
        if (res.data.errcode === 0) {
          this.systemList = res.data.data.list
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    changePagesize (pageSize) {
      this.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.pageNo = pageNo
      this.init()
    }
  },
  watch: {
    docking_system_id (val) {
      let params = {
        'docking_system_id': val
      }
      getCommonDockingSystemList(params).then(res => {
        if (res.data.errcode === 0) {
          this.dockingSystem = res.data.data.list[0]
          let array = this.dockingSystem.docking_system_params.split(',')
          array.forEach(function (temp, index) {
            let data = {
              key: temp,
              value: ''
            }
            array[index] = data
          })
          this.paramsLable = array
          let obj = {}
          this.paramsLable.forEach(function (temp, index) {
            obj[temp.key] = temp.value
          })
          console.log(this.paramsLable, 'llllllllllllll')
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.getCommonDockingSystemList()
  }
}
</script>
